<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <input type="text" v-model="u.username">
        <input type="text" v-model="u.password">
        <input type="text" v-model="u.name">
        <input type="text" v-model="u.phone">
        <input type="button" value="添加用户" @click="add()">

        <table border="1">
            <caption>用户信息列表</caption>
            <tr>
                <th>序号</th>
                <th>用户名</th>
                <th>密码</th>
                <th>昵称</th>
                <th>手机号</th>
            </tr>
            <tr v-for="(user, i) in userArr">
                <td>{{i+1}}</td>
                <td>{{user.username}}</td>
                <td>{{user.password}}</td>
                <td>{{user.name}}</td>
                <td>{{user.phone}}</td>
            </tr>
        </table>
    </div>
</body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    let v = new Vue({
        el:"body>div",
        data:{
            info:"",
            userArr:[
                {
                    username:"zhangsan",
                    password:"123123",
                    name:"张三",
                    phone:18899994561
                },
                {
                    username:"lisi",
                    password:"123123",
                    name:"李四",
                    phone:18899998888
                },
                {
                    username:"wangwu",
                    password:"123456",
                    name:"王五",
                    phone:18899884561
                },
            ],
            u:{
                username:"",
                password:"",
                name:"",
                phone:"",
            }
        },
        methods:{
            add(){
                v.userArr.push({
                        username:v.u.username,
                        password:v.u.password,
                        name:v.u.name,
                        phone:v.u.phone
                });
            }
        }
    })
</script>
</html>
